//调用
$(function () {
    //头部移入
    getTop();
    // 头部输入框
    getText();
    // 导航栏
    getNav();
    //购物车
    getCart();
    //全选
    getCheck();
    //删除
    getDel();
    //减少
    getAdd();

})


//头部移入
function getTop() {
    $(".header>.top_right>.shop").mouseenter(function () {
        $(".top_right .cart").show();
    });
    $(".header>.top_right>.shop").mouseleave(function () {
        $(".top_right .cart").hide();
    });
}

// 头部输入框
function getText() {
    $(".main .m_right input").on("focus", function () {
        $(".recommends>a").hide();
    })
    $(".main .m_right input").on("blur", function () {
        $(".recommends>a").show();
    })
}


// 导航栏
function getNav() {
    $(".main #m_bigbox>li").on("click", function () {
        $(this).find(".m_hide").stop().slideToggle().parent().siblings("li").find(".m_hide").stop().slideUp(1)
    });
}
//购物车
// getCart();
function getCart() {
    let goodsId = location.search.slice(1).split("=")[1]
    // console.log(id);

    $.get("../goodsAndShoppingCart/getShoppingCart.php", { "vipName": getCookie("username") }, function (data) {
        // console.log(data);
        let str = '';
        for (let k in data) {
            str += `<tr goodsId="${data[k].goodsId}">
        <td><input type="checkbox" class="check"></td>
        <td class="oImg">
            <img src="${data[k].goodsImg}" alt="" width="50px" height="50px">
            <p>${data[k].goodsName}</p>
        </td>
        <td class="oWidth"><span>${data[k].goodsPrice}</span>元</td>
        <td>   
            <button class="getJian">-</button>
            <input type="text" class="much" value="${data[k].goodsCount}" size="1">
            <button class="getJia">+</button>
        </td>
        <td class="xj">
            ${data[k].goodsPrice * data[k].goodsCount}元
        </td>
        <td>
            <button class="delShan">删除</button>
        </td>
        </tr>`
        }
        $("tbody").html(str);
        getMuch();
    }, "json")

}

//数量调用
function getAdd() {
    $("tbody").on("click", ".getJian", function () {
        getXiugai($(this), "-");
        // console.log("减少");
        getMuch()

    })
    $("tbody").on("click", ".getJia", function () {
        getXiugai($(this), "+");
        // console.log("增加");
        getMuch()
    })
}

//修改封装
function getXiugai(btn, oper) {

    let goodsId = btn.parent().parent().attr("goodsId");
    // console.log(goodsId);
    let count = btn.parent().parent().find(".much").val();

    oper == "-" ? count-- : count++;
    if (count < 1) {
        count = 1;
    };
    btn.parent().parent().find(".much").val(count);
    $.get("../goodsAndShoppingCart/updateGoodsCount.php", {
        "vipName": getCookie("username"),
        "goodsId": goodsId,
        "goodsCount": count
    },
        function (data) { console.log(data); }, "json")

    let price = parseFloat(btn.parent().prev().text());
    let xj = count * price;
    btn.parent().next().html(xj + "元");

    getMuch();

}


//删除
function getDel() {
    $("tbody").on("click", ".delShan", function () {
        if (confirm('确定删除吗？') == false) {
            return;
        }
        getDelShan();
    })
}


function getDelShan() {
    let goodsId = $(".delShan").parent().parent().attr("goodsId");
    $.get("../goodsAndShoppingCart/deleteGoods.php",
        { "vipName": getCookie("username"), "goodsId": goodsId },
        function (data) {
            // console.log(data);
            if (data == '1') {
                getCart();
            }
        })
}

//总价和总量
function getMuch() {
    let sum = 0;
    let count = 0;
    $(".xj").each(function (index, item) {
        sum += parseFloat($(item).html());
        console.log("index, item", index, item);
    })

    $(".much").each(function (index, item) {
        count += parseFloat($(item).val());
    })

    $("#getTotal").html(sum + "元");
    $("#getGross").html(count + "个");
}

//全选
function getCheck() {
    $("#check").click(function () {
        //    先获取当前点击元素的状态 true/false
        // console.log($(this).prop('checked'));
        let flag = $(this).prop('checked');
        $(".check").prop("checked", $(this).prop('checked')); //把点击元素的状态设置给下面所有的check
        if (!flag) {
            $(".check").removeClass('active')
        } else {
            $(".check").addClass('active')
        }

    })

    //  给每一个下面的元素添加点击时间
    $(".check").click(function () {
        $(this).toggleClass('active')
        if ($(".check").length == $(".active").length) {
            $("#check").prop("checked", true)
        } else {
            $("#check").prop("checked", false)
        }

    })
}

